<template>
	<view>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#2979ff" ref="tabs" :list="list" :current="current" @change="tabChange"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" style="height: 91vh;" @animationfinish="animationfinish" :current="swiperCurrent" @transition="transition"  @change="onSwiperChange">
			<swiper-item class="swiper-item" style="height: 100%;" v-for="(item,index) in list" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"  refresher-enabled="true"  :refresher-triggered="trigger" @refresherrefresh="refresherrefresh">
					<view class="page-box" @click="intoOrderDetail(itemOrder)" v-for="itemOrder in buillList " :key="itemOrder.id" style="padding:0 20rpx;margin-top: 20rpx;">
						<view class="" style="width: 100%;background-color: #ffffff;border-radius: 20rpx;padding:20rpx;">
							<view class="" style="width: 100%;height: 20%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view class="" style="display: flex;flex-direction: row;align-items: center;width: 80%;">
									<view class="" style="width: 2%;height: 40rpx;background-color: #2979FF;"></view>
									<view class="" style="margin-left: 2%;">订单编号：{{itemOrder.orderCode}}</view>
								</view>
								<view class="" :style="{color:itemOrder.orderProcessStatus==1 ? 'red' : (itemOrder.orderProcessStatus==4 || itemOrder.orderProcessStatus==3 ? '#FF9900' : (itemOrder.orderProcessStatus==5 ? '#2979FF' : ''))}">
									{{itemOrder.orderProcessStatus==1 ? '待处理' : (itemOrder.orderProcessStatus==4 || itemOrder.orderProcessStatus==3 ? '待完成' : (itemOrder.orderProcessStatus==5 ? '已完成' : '')) }}
								</view>
							</view>
							<view class="" style="width: 100%;display: flex;flex-direction: column;justify-content: center;">
								<view class="" style="margin-top: 10rpx;">支付时间：{{itemOrder.payTime}}</view>
								<view class="" style="margin-top: 10rpx;">上门时间：{{itemOrder.demandTime}}</view>
								<view class="" style="margin-top: 10rpx;">订单金额：<text style="color: red;font-size: 35rpx;">￥{{itemOrder.totalMoney}}</text></view>
								<view class="" v-if="itemOrder.orderNote" style="margin-top: 10rpx;">备注：{{itemOrder.orderNote}}</view>
							</view>
							<view class="" style="width: 100%;display: flex;flex-direction: row-reverse;margin-top: 20rpx;">
								<view class=""><u-button type="primary" @click="intoOrderDetail(itemOrder)" size="mini">查看详情</u-button></view>
								<view class="" style="margin-right: 20rpx;" v-if="itemOrder.orderProcessStatus==1">
									<u-button type="warning" size="mini">派单</u-button>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="height: 200rpx;width: 100%;display: flex;flex-direction: column;align-items: center;color:#2979FF ;line-height: 200rpx;" v-if="listState">-----我也是有底线的-----</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {	
		data() {
			return {
				list: [{
						name: '全部'
					},
					{
						name: '待处理'
					},
					{
						name: '服务中'
					},
					{
						name: '服务完成'
					}
				],
				current:0,
				swiperCurrent:0,
				buillList:[],
				dataForm:{
					orderProcessStatus:'',
					pageNumber:1,
					pageSize:20,
				},
				total:'',
				listState:false,
				trigger:false
				
			};
		},
		onLoad() {
			this.getBillList()
		},
		onShow() {
			this.getBillList()
		},
		methods: {
			//查看订单详情
			intoOrderDetail(e){
				let orderInfo = JSON.stringify(e)
				uni.setStorageSync('orderInfo',orderInfo)
				uni.navigateTo({
					url:'/pages/orderSonPage/orderDetail/orderDetail'
				})
			},
			getBillList() {
				this.dataForm.pageNumber = 1
				this.$u.get('life/order/shop/page', this.dataForm).then(res => {
					console.log("我是订单列表");
					console.log(res)
					this.buillList = []
					this.buillList = res.list
					this.total = res.total
					if(this.trigger){
						this.$refs.uToast.show({
							title: "刷新成功！",
							type: 'success',
						})
					}
					this.trigger = false
				}).catch(() => {
					console.log("走catch了");
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			tabChange(e){
				console.log(e);
				this.swiperCurrent = e;
				if(e == 1){
					this.dataForm.orderProcessStatus = 1
				}else if(e == 2){
					this.dataForm.orderProcessStatus =3
				}else if(e == 3){
					this.dataForm.orderProcessStatus =5
				}else{
					this.dataForm.orderProcessStatus = ''
				}
				this.getBillList()
			},
			transition(e){
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				console.log(e);
				this.$refs.tabs.setFinishCurrent(e.detail.current);
				this.swiperCurrent = e.detail.current;
				this.current = e.detail.current;
			},
			//左右切换触发事件
			onSwiperChange(event){
				console.log(event.detail.current);
				if(event.detail.current == 1){
					this.dataForm.orderProcessStatus = 1
				}else if(event.detail.current == 2){
					this.dataForm.orderProcessStatus =3
				}else if(event.detail.current == 3){
					this.dataForm.orderProcessStatus =5
				}else{
					this.dataForm.orderProcessStatus = ''
				}
				this.getBillList()
				
			},
			//上拉加载
			reachBottom(){
				console.log("触发了reachBottom");
				console.log(this.buillList);
				console.log(this.buillList.length);
				console.log(this.total);
				if(this.buillList.length == this.total  ){
					console.log("我已经是全部数据了");
					this.listState = true
				}else{
					this.dataForm.pageNumber = this.dataForm.pageNumber + 1
					this.$u.get('life/order/shop/page', this.dataForm).then(res => {
						console.log("我是订单列表");
						console.log(res)
						for(let i = 0;i<res.list.length;i++){
							this.buillList.push(res.list[i]) 
						}
						
					}).catch(() => {
						this.$refs.uToast.show({
							title: "请求失败",
							type: 'error',
						})
					})
					
				}
				console.log(this.buillList);
			},
			//下拉刷新了
			refresherrefresh(){
				this.trigger = true
				console.log("你刷新了");
				this.getBillList()
			}
		},
	}
</script>

<style lang="less">
	page{
		background-color: #F6F6F6;
	}
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>